<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Research: RemoveEventListener</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="../assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style id="demoCSS" type="text/css">
		/* Demo's CSS here */

	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<script
		src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/square-split-combination/preLoader-auto.js"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<div id="demoHTML">
					<!--Demo's html here-->
					<button id="outer">Outer Function</button>
					<button id="inner">Inner self block</button>

					<button id="innerFn">Inner function</button>

					<div id="clear">Remove all click event</div>
				</div>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script id="demoJS" type="text/javascript">
	// Demo's JS here
	function outerClick()
	{
		consoleLog('outer clicked!');
	}
	document.getElementById('outer').addEventListener('click', outerClick);
	document.getElementById('outer').addEventListener('click', outerClick);

	(function () {
		function innerClick()
		{
			consoleLog('inner clicked!');
		}
		document.getElementById('inner').addEventListener('click', innerClick);
		document.getElementById('inner').addEventListener('click', innerClick);

		function removeAllClick()
		{
			document.getElementById('outer').removeEventListener('click', outerClick);
			document.getElementById('inner').removeEventListener('click', innerClick);
		}

		document.getElementById('clear').addEventListener('click', removeAllClick);
	})();

	(function () {
		function innerFunctionClick()
		{
			addClickEvent('innerFn');
			addClickEvent('innerFn');
			addClickEvent('clear', removeClickEvent);
			function addClickEvent(id, event)
			{
//				document.getElementById(id).addEventListener('click', event ? event : clickEvent);
				bindClickIgnoreDrag(document.getElementById(id), null, true);
				bindClickIgnoreDrag(document.getElementById(id), null, true);
				bindClickIgnoreDrag(document.getElementById(id), null, true);
			}
			function removeClickEvent()
			{
//				document.getElementById('innerFn').removeEventListener('click', clickEvent);
				bindClickIgnoreDrag(document.getElementById(id), null, false);
			}
			function clickEvent()
			{
				consoleLog('InnerFunctionClick!');
			}
		}

		innerFunctionClick();
	})();

	function bindClickIgnoreDrag(elements, callback, isBind)
	{
		var eventListenerName = isBind !== false ? 'on' : 'off';

		[].forEach.call(elements, function (element) {
			element[eventListenerName]('mousedown', mouseDownHandler);
		});

		function mouseDownHandler(event)
		{
			event.target.addEventListener('mouseup', mouseUpMoveHandler);
			event.target.addEventListener('mousemove', mouseUpMoveHandler);
		}

		function mouseUpMoveHandler(event)
		{
			if (event.type === 'mouseup' && event.which <= 1) //only for left key
			{
				callback(event);
			}
			event.target.removeEventListener('mouseup', mouseUpMoveHandler);
			event.target.removeEventListener('mousemove', mouseUpMoveHandler);
		}
	}

</script>

</body>
</html>